import user from './user.js';
import BoxTab from './components/BoxTab.js';
import TemplateTab from './components/TemplateTab.js';
import SettingTab from './components/SettingTab.js';

const TimeBox = {
  components: {
    BoxTab,
    TemplateTab,
    SettingTab,
  },
  data() {
    return {
      currentTab: 'BoxTab',
      tabs: [
        { id: 'BoxTab', name: '盒子' },
        { id: 'TemplateTab', name: '模板' },
        { id: 'SettingTab', name: '设置' },
      ],
    }
  },
  template: /* html */`
    <nav>
      <button
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab-button', { active: currentTab === tab.id }]"
        @click="currentTab = tab.id"
      >
      {{ tab.name }}
      </button>
    </nav>
    <component :is="currentTab"></component>
  `
}

const app = Vue.createApp(TimeBox);
window.onload = () => {
  let [brightness, hueRotate] = ['brightness', 'hueRotate']
    .map(x => user.settingList[x].value);
  document.documentElement.style.setProperty(
    'filter',
    `
      brightness(${brightness / 100})
      hue-rotate(${hueRotate}deg)
    `,
  );
  app.mount('body');
}
